<script setup>
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { getSystemInfo } from '@/utils/systemInfo.js'
import { useUserStore } from '@/stores/index.js'

const UserStore = useUserStore()

// 用户名
const username = ref(null)
// Token令牌
const token = ref(null)

// 头部导航栏高度
const navigationBarHeight = ref(0)
// 状态栏高度
const statusBarHeight = ref(0)
// 头部导航栏总高度
const navTotalHeight = ref(0)

// 导航列表
const navList = ref([
	{ name: '全部订单', icon: 'icon-quanbudingdanx1', color: '#24a5f9', navigation: '/UserCenterPackage/Orders/Orders?index=0' },
	{ name: '待付款', icon: 'icon-daizhifu', color: '#faa017', navigation: '/UserCenterPackage/Orders/Orders?index=1' },
	{ name: '待出行', icon: 'icon-daichuhangbeifen', color: '#089834', navigation: '/UserCenterPackage/Orders/Orders?index=2' },
	{ name: '待点评', icon: 'icon-dianping', color: '#f9341e', navigation: '/UserCenterPackage/Orders/Orders?index=3' }
])

// 内容列表
const contentList = ref([
	{ name: '我的收藏', icon: 'icon-shoucang', color: '#efca6c', navigation: '/UserCenterPackage/Collection/Collection' },
	{ name: '我的点评', icon: 'icon-dianping1', color: '#9dce5b', navigation: '/UserCenterPackage/Evaluate/Evaluate' },
	{ name: '我的攻略', icon: 'icon-gonglve', color: '#5aaef4', navigation: '/UserCenterPackage/Post/Post' },
	{ name: '我的钱包', icon: 'icon-licai', color: '#8161ec', navigation: '/UserCenterPackage/Wallet/Wallet' },
	{ name: '咨询客服', icon: 'icon-custom-service', color: '#84aabc' }
])

// 获取设备信息
const SystemInfo = async () => {
	const res = await getSystemInfo()

	// 微信小程序平台
	// #ifdef MP-WEIXIN
	navigationBarHeight.value = res.navHeight
	statusBarHeight.value = res.statusBarHeight
	navTotalHeight.value = res.navTotalHeight
	// #endif
}

// 点击顶部跳转到登录页面或者个人信息页面
const onClickUser = () => {
	if (UserStore.UserInfoList.token) {
		uni.navigateTo({
			url: '/UserCenterPackage/UserInfo/UserInfo'
		})
	} else {
		uni.navigateTo({
			url: '/UserCenterPackage/Login/Login'
		})
	}
}

// 点击导航列表项跳转页面
const onclickNavItem = (nav) => {
	uni.navigateTo({
		url: nav
	})
}

// 点击内容列表项跳转页面
const onClickContentItem = (nav) => {
	if (nav) {
		uni.navigateTo({
			url: nav
		})
	}
}

onLoad(() => {
	SystemInfo()
})

onShow(() => {
	// 获取用户名和Token令牌
	if (UserStore.UserInfoList) {
		if (!UserStore.UserInfoList?.username) {
			username.value = '乐游汇用户'
		} else {
			username.value = UserStore.UserInfoList.username
		}
		token.value = UserStore.UserInfoList.token
	}
})
</script>

<template>
	<view class="container">
		<view class="header" :style="{ paddingTop: navTotalHeight + 'rpx' }">
			<view class="top" @tap="onClickUser">
				<view class="left">
					<view class="avatar">
						<up-avatar size="60" :src="UserStore.UserInfoList.avatar" mode="aspectFill"></up-avatar>
					</view>
					<view class="username">{{ token ? username : '登录/注册' }}</view>
				</view>

				<view class="right">
					<up-icon name="arrow-right" size="20" bold></up-icon>
				</view>
			</view>

			<view class="nav">
				<view class="nav-item" v-for="(item, index) in navList" :key="index" @tap="onclickNavItem(item.navigation)">
					<text class="iconfont" :class="item.icon" :style="{ color: item.color }"></text>
					<view class="nav-name">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-item" v-for="(item, index) in contentList" :key="index" @tap="onClickContentItem(item.navigation)">
				<button v-if="item.name === '咨询客服'" style="position: absolute; height: 100%; width: 100%; left: 0; top: 0; opacity: 0; z-index: 999" open-type="contact"></button>
				<view class="item-left">
					<view class="icon">
						<text class="iconfont" :class="item.icon" :style="{ color: item.color }"></text>
					</view>
				</view>
				<view class="item-right">
					<view class="name">{{ item.name }}</view>
					<up-icon name="arrow-right" size="20"></up-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	height: 100%;

	.header {
		position: relative;
		padding-bottom: 100rpx;
		background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
		border-radius: 0 0 5% 5%;

		.top {
			padding: 20rpx 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				display: flex;
				align-items: center;

				.username {
					margin-left: 30rpx;
					font-size: 45rpx;
				}
			}
		}

		.nav {
			position: absolute;
			top: 80%;
			left: 50%;
			transform: translateX(-50%);
			width: 95%;
			height: 200rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 30rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 28rpx;

			.nav-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.iconfont {
					font-size: 55rpx;
					margin-bottom: 15rpx;
				}
			}
		}
	}

	.content {
		width: 95%;
		margin: 150rpx 20rpx;
		margin-bottom: 0;
		background-color: #fff;
		border-radius: 20rpx;

		.content-item {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 110rpx;
			padding: 20rpx;

			.item-left {
				width: 10%;

				.icon {
					.iconfont {
						font-size: 40rpx;
					}
				}
			}

			.item-right {
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 3rpx solid #f5f5f5;
				padding: 20rpx 0;
			}

			&:last-child .item-right {
				border-bottom: none;
			}
		}
	}
}
</style>
